<template>
	<view class="registration_application">
		<view class="top_content flex_row al_center">
			<view class="application_person flex_1 flex_col">
				<text>申报人</text>
				<text>刘德华</text>
			</view>
			<view class="top_line"></view>
			<view class="application_person flex_1 flex_col">
				<text>申报时间</text>
				<text>{{nowDate}}</text>
			</view>
		</view>
		
		<view class="options_item flex_row al_center just_space_between mg_tp_20">
			<text class="options_label" :style="{width:'180rpx'}">项目</text>
			<picker class="flex_1" mode="selector" :range="projectList" range-key="name" @change="changeProject">
				<view class="flex_row al_center flex_1 just_end">
					<text v-if="selectProject" class="please_choice over_text flex_1" :style="{color:'#333'}">{{selectProject.name}}</text>
					<text v-else class="please_choice">请选择</text>
					<uni-icons type="forward" :size="20" color="#EAEAEA"></uni-icons>
				</view>
			</picker>
			
		</view>
		<view class="options_item flex_row al_center just_space_between">
			<text class="options_label">责任人</text>
			<picker class="flex_1" mode="selector" :range="managerList" range-key="name" @change="changeManager" @click="warnInfo">
				<view class="flex_row al_center flex_1 just_end">
					<text v-if="selectManager" class="please_choice over_text flex_1" :style="{color:'#333'}">{{selectManager.userName}}</text>
					<text v-else class="please_choice">请选择</text>
					<uni-icons type="forward" :size="20" color="#EAEAEA"></uni-icons>
				</view>
			</picker>
		</view>
		<view class="options_item_input flex_row ">
			<text class="options_label_input mg_tp_30">事由</text>
			<textarea class="options_input flex_1 mg_tp_30" placeholder="请输入，限28字" :maxlength="28"></textarea>
		</view>
		
		<view class="options_item_input2 flex_row al_center">
			<text class="options_label_input ">起止时间</text>
			<view class="flex_1 flex_row al_center">
				<picker mode="date" class="flex_1 flex_row just_center"  @change="changestartDate">
					<text v-if="applyData.startTime == null" class="select-date flex_1">开始时间</text>
					<text v-else class="select-date flex_1" :style="{color:'#333'}">{{applyData.startTime}}</text>
				</picker>
				<text class="select-date flex_1">——</text>
				<picker mode="date" class="flex_1 flex_row just_center" @change="changeendDate">
					<text v-if="applyData.endTime  == null" class="select-date flex_1">结束时间</text>
					<text v-else class="select-date flex_1" :style="{color:'#333'}">{{applyData.endTime}}</text>
				</picker>
			</view>
		</view>
		
		<view class="options_item flex_row al_center just_space_between mg_tp_20">
			<text class="options_label">申报费用项</text>
			<picker mode="selector" :range="expenseList" range-key="text" @change="selectExpenseItem">
				<view class="flex_row al_center">
					<text v-if="selectExpense" class="please_choice" :style="{color:'#333'}">{{selectExpense.text}}</text>
					<text v-else class="please_choice">请选择</text>
					<uni-icons type="forward" :size="20" color="#EAEAEA"></uni-icons>
				</view>
			</picker>
		</view>
		<view v-if="selectExpense&&selectExpense.type === 0" class="full_width flex_col">
			<text class="repair_title">维修费</text>
			<view class="repair_content">
				<view class="repair_head flex_row al_center">
					<text class="flex_1">配件名称</text>
					<text class="flex_1">数量</text>
					<text class="flex_1">单价(元)</text>
				</view>
				<view class="repair_head flex_row al_center">
					<input type="text" class="flex_1 input_item" :style="{textAlign:'center'}" placeholder="请输入" />
					<uni-number-box @change="changePartNum"></uni-number-box>
					<input type="number" v-model="unitPrice" class="flex_1 input_item" :style="{textAlign:'center'}" placeholder="请输入" />
				</view>
				<view class="repair_head flex_row al_center just_end">
					<text class="repair_cost">费用合计：{{totalFee}}元</text>
				</view>
			</view>
			
			
			<view class="options_item_input2 flex_row al_center mg_tp_20">
				<text class="options_label_input ">维修人</text>
				<input type="text" v-model="applyData.engineerName" class="flex_1 input_item" placeholder="请输入"/>
			</view>
			
			<view class="options_item flex_row al_center just_space_between">
				<text class="options_label">维修时间</text>
				<picker mode="date" @change="changeRepairTime">
					<view class="flex_row al_center">
						<text v-if="applyData.enventTime" class="please_choice" :style="{color:'#333'}">{{applyData.enventTime}}</text>
						<text v-else class="please_choice">请选择</text>
						<uni-icons type="forward" :size="20" color="#EAEAEA"></uni-icons>
					</view>
				</picker>
				
			</view>
			
			<view class="options_item_input flex_row ">
				<text class="options_label_input mg_tp_30">维修原因</text>
				<textarea v-model="applyData.reason" class="options_input flex_1 mg_tp_30" placeholder="请输入" ></textarea>
			</view>
		</view>
		
		
		<view class="space_content"></view>
		<view class="submit_content flex_col">
			<view class="flex_row mg_tp_30 al_end">
				<switch type="checkbox" @change="agreeNow"></switch>
				<text class="warn_txt">如有虚报，自愿接受自动离职与承担法律责任</text>
			</view>
			<view class="two_cost_btns flex_row just_space_between mg_tp_20">
				<text @click="submitData">保存</text>
				<text>提交审批</text>
			</view>
		</view>
	</view>
</template>
<!-- 可选择费用项为：维修费、交通费、住宿费、餐饮费、零星采购费、加油费、资料费、人工费、租赁费。 -->
<script>
	import api from '@/common/js/api.js'
	export default {
		data() {
			return {
				lng:0,
				lat:0,
				agree:false,
				unitPrice:0,
				partsNum:1,
				selectManager:null,
				selectProject:null,
				projectList:[],
				managerList:[],
				selectExpense:null,
				expenseList:[{type:0,text:'维修费'},{type:1,text:'交通费'},{type:2,text:'餐饮费'},
				{type:3,text:'住宿费'},{type:4,text:'(安全｜质量)检查'},{type:5,text:'培训'},
				{type:6,text:'电话补助'},{type:7,text:'罚款'},{type:8,text:'车辆保养'},{type:9,text:'办公用品'},{type:10,text:'节日福利'},{type:11,text:'奖励'}], 
				applyData:{
					startTime:null,
					endTime:null,
					engineerName:null,
					enventTime:null,
					address:null
				}
			};
		},
		computed:{
			nowDate:function(){
				let nowDate = api.dateFormat('YYYY-mm-dd HH:MM',new Date())
				return nowDate
			},
			totalFee:function(){
				return (this.unitPrice*this.partsNum).toFixed(2)
			}
		},
		onReady() {
			this.getProjects()
		},
		onLoad() {
			let _this = this
			uni.getLocation({
				geocode:true,
				success(res) {
					_this.lng = res.longitude
					_this.lat = res.latitude
				}
			})
		},
		methods:{
			agreeNow(event){
				this.agree = event.detail.value
			},
			changePartNum(event){
				this.partsNum = event
			},
			submitData(){
				// /usual/expense/commit
				if(!this.agree){
					uni.showToast({
						icon:'none',
						title:'请先勾选'
					})
					return;
				}
				let _this = this
				let submitData = Object.assign({},this.applyData)
				this.$set(submitData,'startTime',new Date(submitData.startTime).getTime())
				this.$set(submitData,'endTime',new Date(submitData.endTime).getTime())
				this.$set(submitData,'enventTime',new Date(submitData.enventTime).getTime())
				let data = {
					lng: this.lng,
					lat: this.lat,
					createrId: uni.getStorageSync('userInfo').uid,
					createrName: uni.getStorageSync('userInfo').userName,
					title:'',
					type:this.selectExpense.type,
					totalExpense:this.totalFee,
					...submitData,
					projectId:this.selectProject.id,
					projectName:this.selectProject.name
				}
				this.$utils.http.post('/usual/expense/commit',data).then(res=>{
					console.error(res)
					if(res.code === 200){
						uni.showToast({
							icon:'none',
							title:'成功保存'
						})
						setTimeout(()=>{
							_this.$utils.navBack()
						},1000)
					}
				})
			},
			warnInfo(){
				if(this.selectProject == null||this.selectProject.id==null){
					uni.showToast({
						icon:'none',
						title:'请先选择项目！'
					})
					return;
				}
			},
			getmanagers(){
				this.$utils.http.post(`/project/projectUsers/listByprojectInfoId?projectInfoId=${this.selectProject.id}`,{projectInfoId:this.selectProject.id}).then(res=>{
					if(res.code === 200){
						this.managerList = res.data
					}
				})
			},
			changeManager(event){
				
				this.selectManager = this.managerList[event.detail.value]
			},
			changeProject(event){
				this.selectProject = this.projectList[event.detail.value]
				this.getmanagers()
			},
			changeRepairTime(event){
				this.$set(this.applyData,'enventTime',event.detail.value)
			},
			getProjects(){
				this.$utils.http.get('/project/projectInfo/listAll').then(res=>{
					if(res.code === 200){
						this.projectList = res.data
					}
				})
			},
			selectExpenseItem(event){
				this.selectExpense = this.expenseList[event.detail.value]
			},
			changestartDate(event){
				this.$set(this.applyData,'startTime',event.detail.value)
			},
			changeendDate(event){
				this.$set(this.applyData,'endTime',event.detail.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/css/main.css";
.registration_application{
	width: 750rpx;
	min-height: 100vh;
	background-color: #F8F9FC;
	.top_content{
		width: 750rpx;
		height: 128rpx;
		background-color: #fff;
		.top_line{
			width:1px;
			height:25px;
			background-color: #E6E6E6;
		}
		.application_person{
			margin-left: 40rpx;
			text:nth-child(1){
				font-size:28rpx;
				font-weight:500;
				color:#909090;
			}
			text:nth-child(2){
				font-size:32rpx;
				font-weight:500;
				color:#454545;
			}
		}
	}
	.options_item{
		width: 750rpx;
		height: 112rpx;
		background-color: #fff;
		padding: 0 40rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
		.options_label{
			font-size: 32rpx;
			color: #454545;
			font-weight: 500;
		}
		.please_choice{
			margin-right: 10rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #C9C9C9;
		}
		
	}
	.options_item_input{
		width: 750rpx;
		background-color: #fff;
		padding: 0 40rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
		.options_label_input{
			width: 180rpx;
			font-size: 32rpx;
			color: #454545;
			font-weight: 500;
		}
		.options_input{
			font-size: 28rpx;
			color: #454545;
			height: 160rpx;
		}
		.select-date{
			font-size: 28rpx;
			font-weight: 500;
			color: #C9C9C9;
			text-align: center;
		}
	}
	.options_item_input2{
		width: 750rpx;
		background-color: #fff;
		height: 112rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
		.options_label_input{
			width: 180rpx;
			font-size: 32rpx;
			color: #454545;
			font-weight: 500;
		}
		.options_input{
			font-size: 28rpx;
			color: #454545;
			height: 160rpx;
		}
		.select-date{
			font-size: 28rpx;
			font-weight: 500;
			color: #C9C9C9;
			text-align: center;
		}
	}
	.repair_title{
		color: #909090;
		font-size: 28rpx;
		margin: 30rpx 0;
		margin-left: 40rpx;
	}
	.input_item{
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}
	.repair_content{
		width: 750rpx;
		background-color: #fff;
		.repair_head{
			width: 750rpx;
			height: 112rpx;
			text{
				text-align: center;
				font-size: 30rpx;
				font-weight: 500;
				color: #333;
			}
		}
		.repair_cost{
			font-size: 32rpx;
			color:#454545;
			margin-right: 40rpx;
		}
	}
	.over_text{
		flex-shrink: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.space_content{
		width: 750rpx;
		height: 250rpx;
	}
	.submit_content{
		width: 750rpx;
		height: 230rpx;
		background-color: #fff;
		position: fixed;
		padding: 0 40rpx;
		box-sizing: border-box;
		bottom: 0;
	}
	.warn_txt{
		font-size: 28rpx;
		color: #999;
		margin-left: 10rpx;
	}
	.two_cost_btns{
		
		width: 670rpx;
		text:nth-child(1){
			// display: block;
			width:320rpx;
			height:96rpx;
			line-height: 96rpx;
			text-align: center;
			border-radius:12rpx;
			border:1px solid #A9A9A9;
			font-size: 32rpx;
			font-weight: 600;
			color: #909090;
		}
		text:nth-child(2){
			// display: block;
			width:320rpx;
			height:96rpx;
			line-height: 96rpx;
			text-align: center;
			border-radius:12rpx;
			background-color: #2962F9;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
		}
	}
}
</style>
